<template>
	
		<view class="pages">
			
		<view class="header-1" v-if="refundStatus[orderList.status]?.value == 3">
			<view class="header" >
				<image class="header-img" src="@/static/homeimg/login.png"></image>
				<view class="price" v-if="refundStatus[orderList.status]?.value == 2 || refundStatus[orderList.status]?.value ===3">
					+{{orderList.refundInfo.refundPrice}}
				</view>
				
				<view class="success" >
					{{refundStatus[orderList.status]?.text}}
					<u-divider
					      lineColor="#dcdfe6"
					></u-divider>
				</view>
			
				
			</view>
			<!-- 退款详情 -->
			<view class="">
			<view class="refundmoney">
				<view class="refundmoneytext">
					申请退款金额
				</view>
				<view class="refundmoneyNum">
					￥{{orderList.refundInfo.refundPrice}} 
				</view>
			</view>
			
			<view class="refundmoney">
				<view class="refundmoneytext">
					退款至
				</view>
				<view class="refundmoneyNum">
					{{orderList.refundInfo.payType == 1 ? '微信账户' : '余额'}}
				</view>
			</view>
			
			<view class="refundmoney">
				<view class="refundmoneytext">
					创建时间
				</view>
				<view class="refundmoneyNum">
					{{orderList.refundInfo.refundTime}} 
				</view>
			</view>
			
			<view class="refundmoney">
				<view class="refundmoneytext">
					退款单号
				</view>
				<view class="refundmoneyNum">
					{{orderList.refundInfo.orderId}} 
				</view>
			</view>
			<view class="refundmoney">
				<view class="refundmoneytext">
					商家单号
				</view>
				<view class="refundmoneyNum">
					{{orderList.refundInfo.refundOrderNo}} 
				</view>
			</view>
			</view>
		</view>
		
		<!-- 商家处理中 -->
	<view class="schedule" v-if="refundStatus[orderList.status]?.value == 1 || refundStatus[orderList.status]?.value == 2 || refundStatus[orderList.status]?.value == 4">
		<view class="flex flex-auto items-center justify-start" v-if="refundStatus[orderList.status]?.value == 1">
			<image class="w-[35rpx] h-[41rpx] mr-[10rpx] pb-[4rpx]" src="@/static/order/ordertime.png"></image>
			<text class=" text-[#000000] text-[40rpx] font-bold">等待商家处理</text>
		</view>
		<view class="" v-if="refundStatus[orderList.status]?.value == 4">
			<text class=" text-[#000000] text-[40rpx] font-bold">商家拒绝退款</text>
		</view>
		<view class="" v-if="refundStatus[orderList.status]?.value == 4">
			<text class=" text-[#010101] text-[26rpx] ">商家不同意您的退款，商品已出餐，已产生费用不予退款。</text>
		</view>
		<u-line color="#efefef" margin="20rpx 0"></u-line>
		<view class=" flex justify-end" style="">
			<div>
				<up-button
				@click="call(dataList.phone)"
				text="电话商家" 
				shape="circle" 
				:hairline="true" 
				:customStyle="{border:'1px solid  #D3D3D3',height:'62rpx',marginRight:'20rpx',width:'165rpx'}">
				</up-button>
			</div>
		<div>
		<up-button 
		@click="call(phoneSys)"
			 text="联系客服" 
			 shape="circle" 
			 :hairline="true" 
			 :customStyle="{border:'1px solid  #D3D3D3',height:'62rpx',width:'165rpx'}">
			 </up-button>	
		</div>
			
		</view>
	</view>
		<!-- 退款进度 -->
		<view class="schedule">
			<view class="">
				<view class="scheduleText">
					退款进度
				</view>
				<u-steps inactiveColor="#eaeaea" activeColor="#ffa565" :dot="true" :current="0"
					direction="column">
					<u-steps-item v-for="(item,index) in orderList.refundLogs" :key="index">
						<template #desc>
							<view class="stepsitem">
								<view class="stepsitemtext">
									{{item.title}}
								</view>
								
								<view class="stepsitemtime">
									{{item.createdAt}}
								</view>
							</view>
							<view class="mb-[20rpx] text-[28rpx] text-[#787878] flex">
								<view class="flex-none">
									备注:
								</view>
								<view class="flex-1">
									<up-text :text="item.remarks" wordWrap="anywhere"></up-text>
								</view>
								
								
							</view>
							<view class="" style="width: 100%;display: flex;flex-wrap: wrap;justify-content: space-between;margin-top: 20rpx;">
								<view 
							class="flex"
							 v-for="(items,index2) in item.refundImages " 
							:key="index2" 
							style="width: 195rpx; height: 195rpx;margin-bottom:40rpx ;">
								<image @click="previewImages(index2,item.refundImages)" :src="items" style="width: 195rpx; height: 195rpx;"></image>
							</view>
							</view>
				
						</template>
					</u-steps-item>
				
				</u-steps>
			</view>
		</view>
		</view>
</template>

<script setup>
	import {ref,reactive,onMounted,} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app';
	import {refunddetail} from "@/api/order.js"
	import {refundStatus} from "@/constant/index.js"
	let dataList = reactive({
		orderNo:'',
		phone:'',
	})
	const phoneSys = ref('15052163062')
	onLoad((e)=>{
		dataList.orderNo = e.orderId
dataList.phone = e.phone
		console.log("当前订单好退款状态",dataList.phone);
	})
	onShow(()=>{
		refund()
	})
	//退款字段
	let orderList = reactive({
		   refundInfo:{},
		   refundLogs:[],
		   status:'',
		   
	})
	let refund = ()=>{
		refunddetail({orderId:dataList.orderNo}).then(res=>{
			if(res.code == 200){
				orderList.refundInfo = res.result.refundInfo
				 orderList.refundLogs = res.result.refundLogs
				 orderList.status =  res.result.refundInfo.refundStatus
				
				
			}
		})
	}
	
	const call =(e)=>{
		uni.makePhoneCall({
			phoneNumber:e
			
		})
		
	}
	const previewImages = (index,item)=> {
				console.log("图片",index,item);
				
			 			let photoList = item.map(item => {
			 				return item;
			 			});
			 			uni.previewImage({
			 				current: index,
			 				urls: photoList
			 			});
			 		}
</script>

<style lang="scss">
	.schedule{
		background: #fff;
		// border: 1px solid red ;
		padding: 30rpx 20rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		
		.scheduleText{
			padding-bottom: 30rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #010101;
		
		}
		.stepsitem{
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			.stepsitemtext{
				width:50%;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #787878;
				line-height: 37rpx;
			}
			.stepsitemtime{
					width: 50%;
					text-align: right;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #787878;
			}
		}
	}
	.refundmoney{
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding-bottom: 30rpx;
		.refundmoneytext{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #787878;
		}
		.refundmoneyNum{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
		}
	}
	.pages{
		padding: 20rpx;
		.header-1{
			background-color: #fff;
			border-radius: 20rpx;
			padding: 0 20rpx;
		}
		.header{
			 display: flex;
			 align-items: center;
			width: 100%;
			 flex-direction: column;
			padding: 50rpx 0 0 0 ;
			
			
			.header-img{
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
				margin: 0 auto;
			}
			.price{
				padding-top: 36rpx;
				font-size: 46rpx;
				font-family: DIN;
				font-weight: 500;
				color: #000000;
			}
			.success{
				width: 100%;
				text-align: center;
				padding-top: 20rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
			} 
		}
	}
</style>